<template>
  <div>
    <h3>这个是Father组件---nextTick--{{ num }}</h3>

    <!-- 在父组件中获取子组件中的函数||属性data||获取props -->
    <Son ref="mySon" :num="num" />
    <button @click="hClick">修改num的值</button>
  </div>

</template>
<script>
import Son from './Son.vue'
export default {
  components: {
    Son
  },
  data() {
    return {
      num: 100

    }
  },
  methods: {
    hClick() {
      this.num = this.num + 1
      console.log(this.num, 'this.num')
      // this.$refs.mySon---->子组件对象，可以调用子组件中函数或熟悉
      console.log(this.$refs.mySon.num, 'this.$refs.mySon.num')
      // dom的更新是异步的
      // 解决的办法 $nextTick：dom更新完成之后再执行$nextTick的回调函数
      // 异步分为宏任务和微任务
      // 优先级： 微任务   ----> dom的渲染-----> 宏任务  setTimeout
      this.$nextTick(() => {
        console.log(this.$refs.mySon.num, 'this.$nextTick')
      })
      setTimeout(() => {
        console.log(this.$refs.mySon.num, 'setTimeout')
      }, 0)
      // 在父组件中使用子组件对象调用子组件的方法

      this.$refs.mySon.hUpdate()
    }
  }
}

</script>
